<template>
  <div class="page">
    <sub-header :title="title"></sub-header>
    <div class='main'>
      <ul class='service' v-for="(item, index) in reviewServices" :key="index">
        <li>{{item.title}}</li>
        <li>
          <div class="stars" :class="{active: item2.active}" v-for="(item2, index2) in item.starts" :key="index2"
               @click="setScore({index: index, index2:index2})"></div>
        </li>
      </ul>
      <div class='content-wrap'>
        <textarea placeholder="来分享你的消费感受吧!" v-model="content"></textarea>
      </div>
      <button class='submit' type="button" @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
import SubHeader from 'components/SubHeader'
import { mapActions, mapState, mapMutations } from 'vuex'

export default {
  name: 'add-review',
  data () {
    return {
      title: '',
      content: ''
    }
  },
  computed: {
    ...mapState({
      uid: state => state.user.uid,
      reviewServices: state => state.order.reviewServices
    }),
  },
  methods: {
    ...mapActions({
      getReviewServices: 'order/getReviewServices',
      addReviews: 'order/addReviews'
    }),
    ...mapMutations({
      setScore: 'order/SET_SCORE'
    }),
    async submit () {
      if (this.content.match(/^\s*$/)) {
        this.$toast('请输入评价内容')
        return
      }
      if (this.isSubmit) {
        this.isSubmit = false
        // 组装评价的数据格式
        let rsdata = []
        this.reviewServices.forEach(item => {
          rsdata.push({
            'gid': this.gid,
            'myid': this.uid,
            'rsid': item.rsid,
            'score': item.score
          })
        })
        let reviewsData = {
          uid: this.uid,
          gid: this.gid,
          content: this.content,
          ordernum: this.ordernum,
          rsdata: rsdata
        }
        // 提交评价
        let res = await this.addReviews(reviewsData)
        if (res.code === 200) {
          this.$toast.success(res.data)
          this.$router.go(-1)
        } else {
          this.$toast.fail(res.data)
        }
      }
    }
  },
  created () {
    this.isSubmit = true
    this.getReviewServices()
    this.ordernum = this.$route.query.ordernum
    this.gid = this.$route.query.gid
    this.title = this.$route.meta.title
    document.title = this.title
  },
  components: {
    SubHeader
  }
}
</script>

<style scoped>
  .page {
    width: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
  }

  .main {
    width: 100%;
    padding-top: 1.02rem;
  }

  .service {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .service li:nth-child(1) {
    font-size: 0.32rem;
    margin-left: 3%;
    margin-right: 15%;
  }

  .service li:nth-child(2) {
    display: flex;
    display: -webkit-flex;
  }

  .service .stars {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url("../../../assets/images/user/orders/stars1.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.3rem;
  }

  .service .stars.active {
    background-image: url("../../../assets/images/user/orders/stars2.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .content-wrap {
    width: 100%;
    height: 4rem;
    text-align: center;
    overflow: hidden;
  }

  .content-wrap textarea {
    width: 95%;
    height: 90%;
    font-size: 0.32rem;
    margin-top: 0.3rem;
    outline: none;
    border: 0 none;
    resize: none;
  }

  .submit {
    width: 90%;
    height: 0.8rem;
    background-color: #E51B19;
    font-size: 0.28rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 0.8rem;
    border: 0 none;
    border-radius: 4px;
    outline: none;
    margin: 0 auto;
    display: block;
    margin-top: 0.3rem;
  }
</style>
